<template>
  <div ref="imageWrapper">
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model ref="form" :model="queryParam" :rules="rules" layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <!-- <a-col :md="4" :sm="6">
            <a-form-model-item label="计划类型">
              <j-dict-select-tag
                style="width: 100%"
                v-model="queryParam.planType"
                placeholder="请选择"
                dict-code="inconplantype"
              />
            </a-form-model-item>
          </a-col>-->
            <a-col :md="3" :sm="6">
              <a-form-model-item label="账套" prop="accName">
                <a-input @click.native="openOrganModel" v-model="queryParam.accName" readOnly placeholder="请选择" />
              </a-form-model-item>
            </a-col>
            <a-col :md="3" :sm="6">
              <a-form-model-item label="年度" prop="accYear">
                <a-date-picker
                  mode="year"
                  placeholder="请选择年度"
                  format="YYYY"
                  :allowClear="true"
                  value-format="YYYY"
                  v-model="queryParam.accYear"
                  :open="yearPickShow"
                  @panelChange="handlePanelChange"
                  @openChange="handleOpenChange"
                />
              </a-form-model-item>
            </a-col>
            <a-col :md="4" :sm="6">
              <a-form-model-item label="月度" prop="accMonth">
                <a-month-picker format="MM" value-format="MM" placeholder="请选择月度" v-model="queryParam.accMonth" />
              </a-form-model-item>
            </a-col>
            <a-col :md="4" :sm="6">
              <a-form-model-item label="类型" prop="codeType">
                <j-dict-select-tag style="width: 100%" v-model="queryParam.codeType" dict-code="km_codeType" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="4">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">清除条件</a-button>
              <a-button
                type="danger"
                :loading="ydLoading"
                @click="handleToYD(false)"
                icon="arrow-right"
                style="margin-left: 8px"
                >转疑点</a-button
              >
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        @change="handleTableChange"
        :loading="loading"
      >
        <span slot="action" slot-scope="text, record">
          <a style="color: red" @click="handleToYd(record)">转疑点</a>
        </span>
      </a-table>
      <CheckOrganModal ref="departModal" @ok="updateQueryParam"></CheckOrganModal>
      <YDModel ref="YDModel" :routerData="$route.path" />
    </a-card>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import columns from './indexColumns'
import { httpAction, getAction, postAction, deleteAction } from '@/api/manage'
import moment from 'moment'
import CheckOrganModal from '../components/CheckOrganModal'
import { base64toImg } from '@/mixins/base64toImg'
import YDModel from '@/views/sj/components/YDModel'

export default {
  name: 'ss',
  mixins: [JeecgListMixin, base64toImg],
  components: { CheckOrganModal, YDModel },
  data() {
    return {
      // 表头
      columns: columns(this),
      queryParam: {
        accYear: '',
        accMonth: '',
        accName: '',
        codeType: '2',
      },
      rules: {
        accYear: [{ required: true, message: '请选择年度' }],
        accName: [{ required: true, message: '请选择账套' }],
        accMonth: [{ required: true, message: '请选择月份' }],
        codeType: [{ required: true, message: '请选择类型' }],
      },
      url: {
        list: '/sjkmfx/sjSubjectsAnalyse/queryEqualSubjectAnalyse',
      },
      yearPickShow: false,
      dataSource: [],
      disableMixinCreated: true,
    }
  },
  computed: {},
  watch: {
    $route: {
      handler: function (to) {
        if (Object.keys(to.query).length) {
          this.disableMixinCreated = true
          this.queryParam = Object.assign(this.queryParam, to.query)
          this.$nextTick(() => {
            this.searchQuery()
          })
        }
      },
      immediate: true,
    },
  },
  methods: {
    searchReset() {
      this.queryParam = this.$options.data().queryParam
      this.dataSource = []
      this.ipagination = this.$options.data().ipagination
    },
    searchQuery() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loadData(1)
        } else {
          return false
        }
      })
    },
    updateQueryParam(data) {
      console.log(data, 'daat')
      let str1 = ''
      let str2 = ''
      data.map((item) => {
        // TODO 账套～～～
        str1 += item.id + ','
        str2 += item.accName + ','
      })
      if (str1.length > 0) {
        str1 = str1.substr(0, str1.length - 1)
      }
      if (str2.length > 0) {
        str2 = str2.substr(0, str2.length - 1)
      }
      this.queryParam.accSetId = str1
      this.queryParam.accName = str2
    },
    openOrganModel() {
      this.$refs.departModal.edit()
    },
    handlePanelChange(value) {
      this.queryParam.accYear = moment(value).format('YYYY')
      this.yearPickShow = false
      this.$refs.form.validateField('accYear', (error) => {
        console.log(error)
      })
    },
    // 弹出日历和关闭日历的回调
    handleOpenChange(status) {
      this.yearPickShow = status
    },
    handleToYD(record) {
      if (this.dataSource.length) {
        const { accYear = '' } = this.queryParam
        let ydnr = undefined
        if (record) {
          ydnr = `【凭证编号：${record.accSetVchNo}】【科目编号：${record.subjectCode}】【科目名称：${record.subjectName}】`
        }
        let time = `【${accYear}】【同科目同金额分析】`
        this.addYd(queryParam, ydnr, time)
      } else {
        this.$message.error('空数据不能新建疑点')
      }
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>